<template>
  <div class="login-page">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="登录"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <!-- 登录表单 -->
    <div class="login-form">
      <!-- Logo -->
      <div class="logo-section">
        <div class="logo">⚖️</div>
        <h1 class="app-name">维权力</h1>
        <p class="app-desc">您身边的维权助手</p>
      </div>

      <!-- 登录方式切换 -->
      <van-tabs v-model:active="loginType" @change="onLoginTypeChange">
        <van-tab title="密码登录" name="password">
          <div class="form-content">
            <van-field
              v-model="form.phone"
              type="tel"
              label="手机号"
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
              maxlength="11"
            />
            <van-field
              v-model="form.password"
              type="password"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            />
          </div>
        </van-tab>
        
        <van-tab title="验证码登录" name="sms">
          <div class="form-content">
            <van-field
              v-model="form.phone"
              type="tel"
              label="手机号"
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
              maxlength="11"
            />
            <van-field
              v-model="form.smsCode"
              label="验证码"
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
              maxlength="6"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  :disabled="smsCountdown > 0"
                  @click="sendSms"
                >
                  {{ smsCountdown > 0 ? `${smsCountdown}s` : '发送验证码' }}
                </van-button>
              </template>
            </van-field>
          </div>
        </van-tab>
      </van-tabs>

      <!-- 登录按钮 -->
      <div class="login-actions">
        <van-button
          type="primary"
          size="large"
          block
          :loading="loading"
          @click="handleLogin"
        >
          登录
        </van-button>
        
        <div class="action-links">
          <span @click="$router.push('/register')">还没有账号？立即注册</span>
          <span @click="handleForgotPassword">忘记密码？</span>
        </div>
      </div>

      <!-- 第三方登录 -->
      <div class="third-party-login">
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        <div class="third-party-buttons">
          <div class="third-party-item" @click="handleWechatLogin">
            <div class="third-party-icon wechat">📱</div>
            <span>微信</span>
          </div>
          <div class="third-party-item" @click="handleAlipayLogin">
            <div class="third-party-icon alipay">💰</div>
            <span>支付宝</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const loginType = ref('password')
const loading = ref(false)
const smsCountdown = ref(0)

const form = reactive({
  phone: '',
  password: '',
  smsCode: ''
})

// 登录方式切换
const onLoginTypeChange = (type) => {
  // 清空表单
  form.password = ''
  form.smsCode = ''
}

// 发送短信验证码
const sendSms = async () => {
  if (!form.phone) {
    showToast('请输入手机号')
    return
  }
  
  if (!/^1[3-9]\d{9}$/.test(form.phone)) {
    showToast('手机号格式不正确')
    return
  }

  try {
    await userStore.sendSmsCode(form.phone)
    showToast('验证码发送成功')
    
    // 开始倒计时
    smsCountdown.value = 60
    const timer = setInterval(() => {
      smsCountdown.value--
      if (smsCountdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (error) {
    showToast(error.message || '验证码发送失败')
  }
}

// 登录处理
const handleLogin = async () => {
  if (!form.phone) {
    showToast('请输入手机号')
    return
  }

  if (loginType.value === 'password' && !form.password) {
    showToast('请输入密码')
    return
  }

  if (loginType.value === 'sms' && !form.smsCode) {
    showToast('请输入验证码')
    return
  }

  loading.value = true
  
  try {
    const loginData = {
      phone: form.phone,
      loginType: loginType.value === 'password' ? 1 : 2
    }

    if (loginType.value === 'password') {
      loginData.password = form.password
    } else {
      loginData.smsCode = form.smsCode
    }

    await userStore.login(loginData)
    showToast('登录成功')
    
    // 跳转到指定页面或首页
    const redirect = route.query.redirect || '/home'
    router.replace(redirect)
  } catch (error) {
    showToast(error.message || '登录失败')
  } finally {
    loading.value = false
  }
}

// 忘记密码
const handleForgotPassword = () => {
  showToast('请联系客服找回密码')
}

// 微信登录
const handleWechatLogin = () => {
  showToast('微信登录功能开发中')
}

// 支付宝登录
const handleAlipayLogin = () => {
  showToast('支付宝登录功能开发中')
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: #f7f8fa;
}

.login-form {
  padding: 0 24px;
}

.logo-section {
  text-align: center;
  padding: 60px 0 40px;
}

.logo {
  font-size: 64px;
  margin-bottom: 16px;
}

.app-name {
  font-size: 28px;
  font-weight: 600;
  color: #323233;
  margin-bottom: 8px;
}

.app-desc {
  font-size: 14px;
  color: #969799;
}

.form-content {
  padding: 20px 0;
}

.login-actions {
  margin-top: 32px;
}

.action-links {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
  color: #1989fa;
}

.action-links span {
  cursor: pointer;
}

.third-party-login {
  margin-top: 48px;
}

.divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #ebedf0;
}

.divider span {
  background: #f7f8fa;
  padding: 0 16px;
  font-size: 12px;
  color: #969799;
}

.third-party-buttons {
  display: flex;
  justify-content: center;
  gap: 48px;
}

.third-party-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.third-party-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
}

.third-party-icon.wechat {
  background: #07c160;
}

.third-party-icon.alipay {
  background: #1677ff;
}

.third-party-item span {
  font-size: 12px;
  color: #646566;
}
</style>